We Are JavaScripters! @22nd
https://gyazo.com/39fe6f89f16de682523b6545d783ad6a
2018/7/23
趣旨
聞くだけじゃなく登壇することで知識を増やしたり広げていこう
マサカリ禁止
全員登壇していこう
飲酒できる
🍺🍺🍺🍺🍺🍺🍺🍺🍺🍺
01.ピピピのPWA @mqtsuo02
自己紹介
まつおちゃん
フリーランスWeb
LTのテーマ
「ホーム画面に追加を実装」してみた
やったこと
ページをつくる
manifestファイルを作る
index.htmlに読み込む
manifestファイルとは？
json形式
おもな設定
ホームアイコン
スプラッシュ
起動後のブラウザとかの設定
設定項目
short_name ... アイコンの下に表示するアプリ名
icons ... 複数サイズのアイコン指定
theme_color ... ツールバーの色
display ... standaloneにするとブラウザ感なくなる
orientation ... 縦横指定
Web App Manifest Generator
非公開プロジェクトはやらないほうがよさそう
指定方法
<link rel="manifest" href="./manifest.json">
Android Chromeはちゃんと動く
iOS Safariの対応まだ微妙…
apple-touch-iconでアイコン指定できる
まとめ
manifest ができれば入り口はできる
ServiceWorker はこれからがんばる
02.Node.jsではじめるオレオレツールの世界 @h_reader
自己紹介
堀内大史
C#でPOSアプリ開発
オレオレツールとは？
俺が作って俺のために使うローカル環境で実行するツール
WindowsやMacでもJSを実行するコマンドがある
Windows
wscript
cscript
Mac
jsc
ただ、console.log()がサポートされてない
print()
WScript.echo()
ファイル操作モジュール
const fs = require('fs')
npmで簡単に既存のモジュールを使える
npm init
いろいろ聞かれても適当に答える
yarn init -y のが爆速かな yamanoku.icon
モジュール一例
excelデータをjsonで取得できる
sheet_to_json
↑でできるようになったこと
特定のディレクトリからExecelデータを取得
必要なデータを取得
webサーバにデータを送信
code:webpack-config.js
module.exports() => {
mode: 'production'
target: 'node'
}
npx webpack index.js で動く
03. Firebase+Nuxt+buefyで悩んでいる話 @Skmt3P
大変だったこと
deployすると503
Buefy本体がpackage.jsonになかったから
publicフォルダが見た目functionsに関数関連
CloudFunctionsのコードの書き方がわからん
Expressを使う？
JSのみで書きたい
Real Time Database OR Cloud Fire Store？
どっちがいいのかわからん
感動したこと
Nuxt + Buefy + Storybookのコンポーネント開発が最高
Buefyからコピペ
JSファイルにペースト
Export書く
Stories.jsファイルを更新
ロジックや見た目を修正できる
04. closureについて再確認した @ariaki
function
第一級オブジェクト
宣言文
関数リテラル
アロー関数
コンストラクタ
即時関数
関数を代入できる
無名関数・即時関数はどう使われていたか？
ブロックスコープの代替手段（グローバル汚染の回避）
letの試用
モジュール化
SymbolやWrakMap
プライベートフィールド
closure
関数オブジェクトの一種
スコープが静的に閉じられている（閉包）
Scope（static / lexical scope）
JSは静的スコープ言語
浅いアクセス
scope chain
inner > outer > global
shadowing
masking
関数のコール時にactivation objectが生成される
protorype chain
メモリ的にはスッキリ
外側の関数で宣言された変数を内側で操作できる
返ってきた即時関数をそのまま返すことができる
即時関数の中に変数をつくって関数を通して使うことができる
Function.prototype
Object
Class構文
memory leak
Time / EventListner
Variables
Circular reference
まとめ
第一級オブジェクトでいろいろ書ける
宣言時参照なので外部変数のGCを阻害する
05. ドリンクスポンサー枠 @Forkwell
Forkwell
非エンジニア学生
500万円
12月からの広告・スポンサー
正直赤字
リニューアルした
オンラインプロフィール
メアドとプロフィール名だけで使える
アウトプットを自動更新
自己紹介
他人との競争
上司にこれからの成長する姿を見せる
06. Practical Typed React App @kdnk
Wantedly Inc. 新卒1年
会社ページリニューアル
Componentの型定義
ページごとに必要なフィールドは違う
ページごとに必要なフィールドのみを返すAPIがある
Container, Componentは使いまわしたい
必要なものだけを定義したいため
Models
ドメイン内で共通の型を定義
ContainerごとにState, Actionの方を定義
Interfaceの定義はState, Actionと同じで毎回やるのはダルい
型定義を楽にしたい
Infer
TS2.8
Conditional Typeで推論された型をパラメタとして利用できる
Union
基本的には&と同じ
(ComponentName)Modelsを
書くComponentsで定義
親ComponentsでimportしてUnion
07. 会場スポンサー枠 @sakkuru
さっくる
SE @ Microsoft
Visula Studio Live Share VS Code.icon
ライブデモ
Visual Studio Code と Visual Studioでペアプロプログラミング
コードのシェア
カーソル、選択位置のシェア
デバッガのシェア
ターミナルの共有 => Share Terminal
サーバーの共有 => Share Server
08. vim.wasmがすごい（WebAssemblyを勉強し始めた） @yukpiz
redish Inc
WebAssemblyでVimを表現
WebAssembly？
2015/06に発表
ブラウザ上で実行可能なバイナリフォーマット
C/C++ => emcc/em++ => wasm/js/html
2017/11に主要ブラウザが対応
Golang for WebAssembly
hello Worldが打てた！
今後に期待
まだまだこれから
JSに置き換えるか? == No
何を目指しているかはドキュメントに書いてる
パフォーマンス面でJSで大変だったのをサポート
新しい技術なのでいろんな言語やライブラリのサポートがでてきそう
Go言語のサポートを期待しています
09. OSSはじめのいっぽ @isoppp
気になること
英語力
英語全然できないのが不安…
Google翻訳でなんとかなる
コードの中身はコードで語ってくる
気持ちの問題
技術力
OSSとか変態しかおらんでしょ…
レビューが結構親切
わからなければ素直に聞いて良い
気持ちの問題
気をつけること
Contributuing Guide
Issue / PRの立て方はちゃんと読む
パッケージをインストールしてから修正する
指示通りテストを実行する
気になるその後
コードの抵抗が軽減
解決パターンなどがわかる
海外行っちゃおう計画
まとめ
英語・技術力はなんとかなる
Contributuing GUIDEはちゃんと読む
OSSをやると人生が変わる（可能性がある）
10. Parser combinatorのはなし @chikoski
Array.prototype.sliceのはなし
eshost
すべてのJSエンジンでの実行結果が分かる
Array / 配列
モノのコピーというのは重い処理操作
Array.prototype.slice ... 1部分から新しい配列を作る
Sliceの使い所：長いリストの1初分に対して処理したいとき
ある範囲だけを表示しているだけ？
本当にそんな動きしているのか？
だいたい嘘＝厳密な定義はしてくれていない
まとめ
JSは謎の部分が多い
文法的に謎なものがあればドキュメントを読もう
もっと気になった人はソースコードを読む
OSSコントリビューターになれる？
https://gyazo.com/371bf5b77a4cb3f61ef7ef4c5e728625
余るって言ってたんで4杯くらい呑んできました yamanoku.icon